<template>
    <div class="wrapper">
        <div class="search">
            <div class="search__back iconfont">
                &#xe6f2;
            </div>
            <div class="search__content">
                <span class="search__content__icon iconfont">&#xe62d;</span>
                <input class="search__content__input" placeholder="请输入商品名称" />
            </div>
        </div>
        <div class="shop">
            <img class="shop__img" :src="nearbyShop.imgUrl">
            <div class="'shop__content shop__content--bordered'">
                <div class="shop__content__title">{{ nearbyShop.name }}</div>
                <div class="shop__content__tags">
                    <span class="shop__content__tag" v-for="(item, index) in nearbyShop.tags" :key="index">{{ item
                    }}</span>
                </div>
                <p class="shop__content__highlight">{{ nearbyShop.desc }}</p>
            </div>
        </div>
        <div class="content">
            <div class="category">
                <div class="category__item" v-for="(item, index) in categoryList" :key="index"
                    :class="{ 'active': isCategory === index }" @click="clickSwitchStyles(index)">
                    {{ item.name }}</div>
            </div>
            <div class="product">
                <div class="product__item" v-for="(item, index) in productList" :key="index">
                    <img class="product__item__img" :src="item.imgUrl" />
                    <div class="product__item__detail">
                        <h4 class="product__item__title">{{ item.name }}</h4>
                        <p class="product__item__sales">{{ item.monthlySales }}</p>
                        <p class="product__item__price">
                            <span class="product__item__yen">&yen;</span>{{ item.presentPrice }}
                            <span class="product__item__origin">&yen;{{ item.originalPrice }}</span>
                        </p>
                    </div>
                    <div class="product__number">
                        <span class="product__number__minus" @click="clickSubQuantity(item)">-</span>
                        {{ item.quantity }}
                        <span class="product__number__plus" @click="clickAddQuantity(item)">+</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="cart">
            <div class="products">
                <div class="products__header">
                    <div class="products__header__all">
                        <span class="products__header__icon iconfont">
                        </span>
                        全选
                    </div>
                    <div class="products__header__clear">清空购物车</div>
                </div>
                <template v-for="item in cartList" :key="item.id">
                    <div class="products__item">
                        <div class="products__item__checked iconfont">&#xe667;</div>
                        <img class="products__item__img" :src="item.imgUrl" />
                        <div class="products__item__detail">
                            <h4 class="products__item__title">{{ item.name }}</h4>
                            <p class="products__item__price">
                                <span class="products__item__yen">&yen;</span>{{ item.presentPrice }}
                                <span class="products__item__origin">&yen;{{ item.originalPrice }}</span>
                            </p>
                        </div>
                        <div class="products__number">
                            <span class="products__number__minus" @click="clickSubQuantity(item)">-</span>
                            {{ item.quantity }}
                            <span class="products__number__plus" @click="clickAddQuantity(item)">+</span>
                        </div>
                    </div>
                </template>
            </div>
            <div class="check">
                <div class="check__icon">
                    <img src="http://www.dell-lee.com/imgs/vue3/basket.png" class="check__icon__img" />
                    <div class="check__icon__tag">{{ totalQuantity }}</div>
                </div>
                <div class="check__info">
                    总计：<span class="check__info__price">&yen;{{ totalPrice }}</span>
                </div>
                <div class="check__btn">去结算</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'ShopView',
  data () {
    return {
      nearbyShop: {
        id: 1,
        imgUrl: 'http://www.dell-lee.com/imgs/vue3/near.png',
        title: '沃尔玛',
        tags: ['月售1万+', '起送¥0', '基础运费¥5'],
        desc: 'VIP尊享满89元减4元运费券（每月3张）'
      },
      categoryList: [
        { id: 1, name: '全部商品' },
        { id: 2, name: '秒杀' },
        { id: 3, name: '新鲜水果' },
        { id: 4, name: '休闲食品' },
        { id: 5, name: '时令蔬菜' },
        { id: 6, name: '肉蛋家禽' }
      ],
      isCategory: 0,
      productList: {
        1: {
          id: 1,
          imgUrl: 'http://www.dell-lee.com/imgs/vue3/near.png',
          name: '番茄250g/份',
          monthlySales: '月售10件',
          presentPrice: '33.6',
          originalPrice: '90.6',
          quantity: 0,
          sign: 0
        },
        2: {
          id: 2,
          imgUrl: 'http://www.dell-lee.com/imgs/vue3/near.png',
          name: '苹果250g/份',
          monthlySales: '月售10件',
          presentPrice: '33.6',
          originalPrice: '64.6',
          quantity: 0,
          sign: 0
        }
      },
      cartList: {}
    }
  },
  computed: {
    totalPrice () {
      let totalPrice = 0
      for (const i in this.cartList) {
        totalPrice = this.cartList[i].presentPrice * this.cartList[i].quantity
      }
      return totalPrice.toFixed(2)
    },
    totalQuantity () {
      let quantity = 0
      if (this.cartList) {
        for (const i in this.cartList) {
          const product = this.cartList[i]
          quantity += product.quantity
        }
      }
      return quantity
    }
  },
  methods: {
    clickSwitchStyles (index) {
      this.isCategory = index
    },
    clickAddQuantity (item) {
      if (item.quantity <= 100) {
        item.quantity += 1
        this.cartList[item.id] = item
        //   this.cartList[item.id].sign = 1
      }
    },
    clickSubQuantity (item) {
      if (item.quantity > 0) {
        item.quantity -= 1
        this.cartList[item.id] = item
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../style/viriables.scss';
@import "../../style/mixins.scss";

.wrapper {
    padding: 0 .18rem;
}

.search {
    display: flex;
    margin: .14rem 0 .04rem 0;
    line-height: .32rem;

    &__back {
        width: .3rem;
        font-size: .24rem;
        color: #B6B6B6;
    }

    &__content {
        display: flex;
        flex: 1;
        background: $search-bgColor;
        border-radius: .16rem;

        &__icon {
            width: .44rem;
            text-align: center;
            color: $search-fontColor;
        }

        &__input {
            display: block;
            width: 100%;
            padding-right: .2rem;
            border: none;
            outline: none;
            background: none;
            height: .32rem;
            font-size: .14rem;
            color: $content-fontcolor;

            &::placeholder {
                color: $content-fontcolor;
            }
        }
    }
}

.shop {
    display: flex;
    padding-top: .12rem;

    &__img {
        margin-right: .16rem;
        width: .56rem;
        height: .56rem;
    }

    &__content {
        flex: 1;
        padding-bottom: .12rem;

        &--bordered {
            border-bottom: 1px solid $content-bgColor;
        }

        &__title {
            line-height: .22rem;
            font-size: .16rem;
            color: $content-fontcolor;
        }

        &__tags {
            margin-top: .08rem;
            line-height: .18rem;
            font-size: .13rem;
            color: $content-fontcolor;
        }

        &__tag {
            margin-right: .16rem;
        }

        &__highlight {
            margin: .08rem 0 0 0;
            line-height: .18rem;
            font-size: .13rem;
            color: #E93B3B;
        }
    }
}

.content {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    top: 1.5rem;
    bottom: .5rem;
}

.category {
    overflow-y: scroll;
    height: 100%;
    width: .76rem;
    background: #F5F5F5;

    &__item {
        line-height: .4rem;
        text-align: center;
        font-size: 14px;
        color: #333;

    }
}

.active {
    background: #FFF;
}

.product {
    overflow-y: scroll;
    flex: 1;

    &__item {
        position: relative;
        display: flex;
        padding: .12rem 0;
        margin: 0 .16rem;
        border-bottom: .01rem solid $content-bgColor;

        &__detail {
            overflow: hidden;
        }

        &__img {
            width: .68rem;
            height: .68rem;
            margin-right: .16rem;
        }

        &__title {
            margin: 0;
            line-height: .2rem;
            font-size: .14rem;
            color: $content-fontcolor;
            @include ellipsis;
        }

        &__sales {
            margin: .06rem 0;
            font-size: .12rem;
            color: $content-fontcolor;
        }

        &__price {
            margin: 0;
            line-height: .2rem;
            font-size: .14rem;
            color: $hightlight-fontColor;
        }

        &__yen {
            font-size: .12rem;
        }

        &__origin {
            margin-left: .06rem;
            line-height: .2rem;
            font-size: .12rem;
            color: $light-fontColor;
            text-decoration: line-through;
        }

        .product__number {
            position: absolute;
            right: 0;
            bottom: .12rem;

            &__minus,
            &__plus {
                display: inline-block;
                width: .2rem;
                height: .2rem;
                line-height: .16rem;
                ;
                border-radius: 50%;
                font-size: .2rem;
                text-align: center;
            }

            &__minus {
                border: .01rem solid $medium-fontColor;
                color: $medium-fontColor;
                margin-right: .05rem;
            }

            &__plus {
                background: $btn-bgColor;
                color: $bgColor;
                margin-left: .05rem;
            }
        }
    }

}

.cart {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

.products {
    overflow-y: scroll;
    flex: 1;
    background: #FFF;

    &__header {
        display: flex;
        line-height: .52rem;
        border-bottom: 1px solid #F1F1F1;
        font-size: .14rem;
        color: #333;

        &__all {
            width: .64rem;
            margin-left: .18rem;
        }

        &__icon {
            display: inline-block;
            color: #0091FF;
            font-size: .2rem;
        }

        &__clear {
            flex: 1;
            margin-right: .16rem;
            text-align: right;
        }
    }

    &__item {
        position: relative;
        display: flex;
        padding: .12rem 0;
        margin: 0 .16rem;
        border-bottom: .01rem solid $content-bgColor;

        &__checked {
            line-height: .5rem;
            margin-right: .2rem;
            color: $btn-bgColor;
            font-size: .2rem;
        }

        &__detail {
            overflow: hidden;
        }

        &__img {
            width: .46rem;
            height: .46rem;
            margin-right: .16rem;
        }

        &__title {
            margin: 0;
            line-height: .2rem;
            font-size: .14rem;
            color: $content-fontcolor;
            @include ellipsis;
        }

        &__price {
            margin: .06rem 0 0 0;
            line-height: .2rem;
            font-size: .14rem;
            color: $hightlight-fontColor;
        }

        &__yen {
            font-size: .12rem;
        }

        &__origin {
            margin-left: .06rem;
            line-height: .2rem;
            font-size: .12rem;
            color: $light-fontColor;
            text-decoration: line-through;
        }

        .products__number {
            position: absolute;
            right: 0;
            bottom: .12rem;

            &__minus,
            &__plus {
                display: inline-block;
                width: .2rem;
                height: .2rem;
                line-height: .16rem;
                ;
                border-radius: 50%;
                font-size: .2rem;
                text-align: center;
            }

            &__minus {
                border: .01rem solid $medium-fontColor;
                color: $medium-fontColor;
                margin-right: .05rem;
            }

            &__plus {
                background: $btn-bgColor;
                color: $bgColor;
                margin-left: .05rem;
            }
        }
    }
}

.check {
    display: flex;
    height: .49rem;
    border-top: .01rem solid $content-bgColor;
    line-height: .49rem;

    &__icon {
        position: relative;
        width: .84rem;

        &__img {
            display: block;
            margin: .12rem auto;
            width: .28rem;
            height: .26rem;
        }

        &__tag {
            position: absolute;
            right: .2rem;
            top: .04rem;
            width: .2rem;
            height: .2rem;
            line-height: .2rem;
            background-color: $hightlight-fontColor;
            border-radius: 50%;
            font-size: .12rem;
            text-align: center;
            color: #fff;
            transform: scale(.5);
        }
    }

    &__info {
        flex: 1;
        color: $content-fontcolor;
        font-size: .12rem;

        &__price {
            line-height: .49rem;
            color: $hightlight-fontColor;
            font-size: .18rem;
        }
    }

    &__btn {
        width: .98rem;
        background-color: #4FB0F9;
        text-align: center;
        color: #FFF;
        font-size: .14rem;
    }
}
</style>
